<template>
	<SafeArea class="flex flex-col items-center justify-center">
		<swiper
			class="w-full h-[46vh]"
			:init-page="2"
			:auto-play="3000"
			pagination-visible
			pagination-color="#426543"
			pagination-unselected-color="#808080"
		>
			<swiper-item
				v-for="(item, index) in list"
				:key="index"
				style="height: 150px"
			>
				<image :src="item" style="height: 100%; width: 100%" />
			</swiper-item>
		</swiper>
		<view class="easy_center">
			<view class="text-lg mt-4 text-gray-600 font-mono">皂作时光</view>
			<image
				class="mt-2"
				src="../../assets/img/kid.png"
				style="width: 100rpx; height: 100rpx"
			/>
		</view>

		<view class="text-sm mt-4 pl-6 pr-4 text-gray-400 font-serif">
			一款专门为手工皂爱好者设计的工具，用户可以计算固体皂和液体皂的配方，根据自己的需求自定义皂方，也可以参考和收藏其他皂方。
		</view>

		<view class="grid grid-rows-2 grid-flow-col gap-4 mt-4">
			<nut-button
				@tap="handleCompute('solid')"
				style="
					height: 20vw;
					width: 40vw;
					border-color: #9b91c2;
					border-radius: 2vw;
					box-shadow: -1px -1px 10px rgba(155, 145, 194, 0.5);
				"
			>
				固体皂计算
			</nut-button>
			<nut-button
				@tap="handleCompute('liquid')"
				style="
					height: 20vw;
					width: 40vw;
					border-radius: 2vw;
					border-color: #9b91c2;
					box-shadow: -1px 1px 10px rgba(155, 145, 194, 0.6);
				"
			>
				液体皂计算
			</nut-button>
			<nut-button
				@tap="handleCompute('myFormula')"
				style="
					height: 20vw;
					width: 40vw;
					border-radius: 2vw;
					border-color: #9b91c2;
					box-shadow: 1px -1px 10px rgba(155, 145, 194, 0.6);
				"
			>
				我的皂方
			</nut-button>
			<nut-button
				@tap="handleCompute('reference')"
				style="
					height: 20vw;
					width: 40vw;
					border-radius: 2vw;
					border-color: #9b91c2;
					box-shadow: 1px 1px 10px rgba(155, 145, 194, 0.6);
				"
			>
				参考皂方
			</nut-button>
		</view>
	</SafeArea>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import Taro from '@tarojs/taro';
import { SafeArea } from '@/components/SafeArea/index';

const handleCompute = (type) => {
	// 先检查本地是否有用户信息
	const userInfo = Taro.getStorageSync('userInfo');
	if (userInfo) {
		// 如果有用户信息，直接跳转
		navigateToPage(type);
	} else {
		// 如果没有，则获取用户信息
		Taro.getUserProfile({
			desc: '用于完善会员资料',
			success: (res) => {
				console.log(res, 'userProfile');
				// 存储用户信息到本地
				Taro.setStorageSync('userInfo', res.userInfo);
				// 存储成功后跳转
				navigateToPage(type);
			},
		});
	}
};

// 页面跳转逻辑抽离
const navigateToPage = (type) => {
	switch (type) {
		case 'solid':
			Taro.navigateTo({
				url: '/pages/solid/index',
			});
			break;
		case 'liquid':
			Taro.navigateTo({
				url: '/pages/liquid/index',
			});
			break;
		case 'myFormula':
			Taro.navigateTo({
				url: '/pages/myFormula/index',
			});
			break;
		case 'reference':
			Taro.navigateTo({
				url: '/pages/reference/index',
			});
		default:
			break;
	}
};

const list = ref([
	// 'https://i-blog.csdnimg.cn/direct/fb7f0ca84a0942d3a48ae71924e0980c.png',
	// 'https://i-blog.csdnimg.cn/direct/a4e3b4603b7145208f793e414b8ca411.png',
	'https://i-blog.csdnimg.cn/direct/423d905a3c9e4c8ead82505c680ccbed.png',
	// 'https://i-blog.csdnimg.cn/direct/c566d196ae71484c8d36c855bfeec32b.png',
	// 'https://i-blog.csdnimg.cn/direct/7ea7e6d3001949d1a23d6f143a216aa7.png',
	// 'https://i-blog.csdnimg.cn/direct/98af952ecbb84d87aa32ae3d73810925.png',
]);
</script>
